<div  style="width: 100%;overflow-y: scroll; ">
    <mat-toolbar class="search-toolbar">
        <span style="flex: 1 1 auto;"></span>
        <form [formGroup]="saveForm" (ngSubmit)="onSaveFormSubmit()">
            <mat-form-field floatLabel="auto" class="my-right-left-16">
                <input matInput placeholder="请输入表单名称(1-25字符)" formControlName="formName" required>
            </mat-form-field>
            <button mat-icon-button [disabled]="!saveForm.valid">
                <fa-icon [icon]="faSave" size="lg"></fa-icon>
            </button>
            <input hidden formControlName="formId">
            <input hidden formControlName="formJson">
        </form>
    </mat-toolbar>
</div>
<div class="my-body-parent-top" style="height: calc( 100% - 70px - 64px );overflow-y: scroll " (scroll)="scrollBottom($event)">
    <div class="my-body">
        <mat-accordion>
            <mat-expansion-panel hideToggle>
                <mat-expansion-panel-header>
                    <mat-panel-title> 
                        增加表单项
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                    <mat-icon>add</mat-icon>
                </mat-expansion-panel-header>

                <form (ngSubmit)="onAddFormSubmit()" [formGroup]="addForm" #addFormDirective="ngForm" > 
                    
                    <mat-form-field floatLabel="auto">
                        <mat-select placeholder="请选择控件类型" formControlName="controlType" required
                            (selectionChange)="selectChange($event)">
                            <mat-option value="textbox">单行文本框</mat-option>
                            <mat-option value="textmorebox">多行文本框</mat-option>
                            <mat-option value="select">下拉选择框</mat-option>
                            <!--
                            <mat-option value="radio">单选(radio)</mat-option>
                            <mat-option value="checkbox">复选(checkbox)</mat-option>
                            -->
                        </mat-select>
                    </mat-form-field> 
                    <mat-checkbox formControlName="required" style="margin-left: 10px">必填</mat-checkbox>
                    <mat-checkbox style="margin-left: 5px" formControlName="multiple" *ngIf="showMultiple">多选</mat-checkbox>
                    <!--仅针对下拉多选-->
                    <mat-form-field class="full-width" floatLabel="auto">
                        <input matInput placeholder="请输入表单项名称" formControlName="label" required>
                    </mat-form-field>
                    <mat-form-field *ngIf="!showOption" class="full-width" floatLabel="auto">
                        <!--仅针对单/多输入框有效-->
                        <input matInput placeholder="请输入默认值" formControlName="value">
                    </mat-form-field>

                    <input hidden placeholder="请输入key" formControlName="key">

                    <div formArrayName="options" *ngIf="showOption">
                        <!--仅针对有选荐的表单项-->
                        <label>选项：</label>
                        <mat-form-field *ngFor="let item of options ; let i=index" class="full-width" floatLabel="never">
                            <mat-icon style="margin-right: 5px" *ngIf="isCheckBox" matPrefix>check_box</mat-icon>
                            <mat-icon style="margin-right: 5px" *ngIf="isRadio" matPrefix>radio_button_checked</mat-icon>
                            <span matPrefix>{{i+1}}、</span>
                            <input matInput [formControlName]="i" placeholder="请输入选项内容" [required]="showOption">
                            <mat-icon matSuffix *ngIf="i===(options.length-1)" (click)="addOption($event)">
                                add_circle_outline
                            </mat-icon>
                            <mat-icon matSuffix *ngIf="options.length>1" (click)="removeOption(i,$event)"
                                style="margin-left: 5px">
                                remove_circle_outline
                            </mat-icon>
                        </mat-form-field>
                    </div>

                    <mat-card-actions><!-- TODO 表单项可以修改-->
                        <button mat-button color="primary" [matMenuTriggerFor]="menu" type="button">
                            内置
                        </button>
                        <mat-menu #menu="matMenu">
                            <button mat-menu-item (click)="selectBuiltIn(1)" type="button">用户</button>
                            <button mat-menu-item (click)="selectBuiltIn(2)" type="button">性别</button>
                            <button mat-menu-item (click)="selectBuiltIn(3)" type="button">手机号</button>
                            <button mat-menu-item (click)="selectBuiltIn(4)" type="button">邮箱</button>
                            <button mat-menu-item (click)="selectBuiltIn(5)" type="button">公司</button>
                            <button mat-menu-item (click)="selectBuiltIn(6)" type="button">职位</button>
                        </mat-menu>
                        <button style="float: right;" color="primary" mat-raised-button
                            [disabled]="!addForm.valid">增加</button>
                    </mat-card-actions>
                </form>
            </mat-expansion-panel>
        </mat-accordion>



        <div style="display: flex; align-items:center; justify-content:left;" class="my-right-left-16 my-top-bottom-8">
            <mat-icon style="margin-right: 10px">rate_review </mat-icon>
            <span>表单预览</span>
        </div>
        <app-dynamic-form [questions]="questions" [editTag]="true"></app-dynamic-form>
    </div>
</div>

<div style="position: fixed; bottom: 64px; width: 100%;" *ngIf="showUP">
    <div style="margin:0 auto;max-width: 800px;display:flex;justify-content: flex-end; ">
        <div style="cursor: pointer; margin-right: 24px;" (click)="scrollTop()">
            <button mat-mini-fab color="accent"><fa-icon [icon]="faAdd" size="lg"></fa-icon></button>
        </div>
    </div>
</div>